{{define "post/display.html"}}
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{template "meta.html"}}

    <title>Post - {{.post.Title}}</title>

    <!-- Bootstrap Core CSS -->
    <link href="/static/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/static/css/blog-post.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery -->
    <script src="/static/libs/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/static/libs/bootstrap/js/bootstrap.min.js"></script>

    <!-- github markdown css -->
    <link rel="stylesheet" href="/static/css/markdown.css" />

    <link rel="stylesheet" href="/static/css/base.css"/>
    <!-- markdown parse -->
    <script src="https://cdn.jsdelivr.net/npm/markdown-it@8.3.1/dist/markdown-it.js"></script>

    <!-- code syntax highlighting -->
    <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css" />
    <script>hljs.initHighlightingOnLoad();</script>

    <script src="https://cdn.jsdelivr.net/gh/jquery-form/form@4.2.2/dist/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script>

    <style>
        .user-image {
            float: left;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            margin-right: 10px;
            margin-top: -2px;
        }
    </style>

    <script>
        $(document).ready(function () {
            // markdown parse
            var md = window.markdownit({
                html:true
            });
            var result = md.render($("#body").text());
            $("#body").html(result);

            $("#articleDelete").click(function (event) {
                if (confirm("Are you sure to delete?")) {
                    articleDelete($("#articleId").text());
                }
            });

            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });

            // scroll body to 0px on click
            $('#back-to-top').click(function () {
                $('#back-to-top').tooltip('hide');
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });

            $('#back-to-top').tooltip('show');
        });
    </script>

</head>

<body>

{{template "navigation.html" .}}

<!-- Page Content -->
<div class="container main">

    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
            <article class="markdown-body">
                <!-- Title -->
                 <h1>{{.post.Title}}</h1>

                <!-- display article info -->
                <div>
                    <!-- show tags -->
                    <tr th:each="tag : ${article.tags}">
                        {{range $key,$value := .post.Tags}}
                        <a href="/tag/{{$value.ID}}" class="btn btn-default btn-sm">
                            <span class="glyphicon glyphicon-tag"></span><span th:text="' ' + ${tag.name}"> {{$value.Name}}</span>
                        </a>
                        {{end}}
                    </tr><!-- show tags -->

                    <!-- display article created time -->
                    <span class="createdTime">
                        <span class="glyphicon glyphicon-calendar"></span>{{dateFormat .post.CreatedAt "06-01-02 15:04"}}
                    </span>

                    <span class="createdTime">
                        <span class="glyphicon glyphicon-eye-open"></span>{{.post.View}}&nbsp;&nbsp;
                    </span>

                </div><!-- display article info -->
                <br/>

                <!-- display aritcle body -->
                <div id="body">{{.post.Body}}</div>

            </article>

            <hr>
            <comment>
                <!-- Comment -->
                {{range .post.Comments}}
                <div class="media">
                    <a class="pull-left" href="{{.GithubUrl}}" target="_blank">
                        {{if .AvatarUrl}}
                        <img class="user-image" src="{{.AvatarUrl}}" alt="">
                        {{else}}
                        <img class="user-image" src="http://placehold.it/64x64" alt="">
                        {{end}}
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading"><a href="{{.GithubUrl}}" target="_blank">{{.NickName}}</a>
                            <small>{{dateFormat .CreatedAt "06-01-02 15:04"}}</small>
                        </h4>
                        {{.Content}}
                    </div>
                </div>
                {{end}}
            </comment>

            <div class="media">
            {{if not .user}}
                <a href="/auth/github">登录发表评论</a>
            {{else}}
                <div id="messagebox" class="alert alert-danger" style="display: none;" role="alert"></div>
            <form id="commentForm" role="form" action="/visitor/new_comment" method="post">
                <input name="postId" type="hidden" value="{{.post.ID}}">
                <div class="form-group">
                    <textarea name="content" class="form-control" id="inputContent" placeholder="评论"></textarea>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <input name="verifyCode" class="form-control" placeholder="验证码">
                    </div>
                    <div class="col-md-4">
                        <img src="/captcha" class="j-verifycode"/>
                    </div>
                </div>
                <div class="pull-right">
                    <button type="submit" class="btn btn-primary">评论</button>
                </div>
            </form>
            {{end}}
            </div>

        </div>
    </div>
    <!-- /.row -->

    <a id="back-to-top" href="#" class="btn btn-default btn-md back-to-top" role="button"
       data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span>
    </a>

</div>
<!-- /.container -->

{{template "footer.html"}}

<script type="text/javascript">
    $(document).on("click",".j-verifycode",function(){
        var path =$(this).attr("src");
        var index = path.indexOf("?");
        path = ( index == -1 )? (path+"?" + new Date()) : path.substring(0,index+1)+ new Date();
        $(this).attr("src", path);
    });

    $(document).ready(function() {
        // bind 'myForm' and provide a simple callback function
        $('#commentForm').ajaxForm(function(data) {
            if(data.succeed){
                    window.location.href = window.location.href
            }else{
                $('#messagebox').show();
                setTimeout(hideMessagebox,2000);
                $('#messagebox').html(data.message);
                $("input[name='verifyCode']").val('');
            }
        });
    });

    function hideMessagebox(){
        $('#messagebox').hide();
    }
</script>

</body>

</html>
{{end}}